/*
 * @Author: Wilbur
 * @Date: 2019-01-18 09:30:17
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-08-20 13:57:11
 */


<template>
    <div class="container supply-list-container">
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20"
            >
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small"
                >
                    <el-col
                        class="filter-item"
                        :md="{ span: 24 }"
                        :sm="{ span: 24 }"
                    >
                        <el-button
                            type="primary"
                            style="float: right;"
                            @click="handleRoute('HireWorkerAdd', {hire_no: hire_no, hire_name: hire_name})"
                            size="small"
                        >添加校园代理</el-button>
                    </el-col>
                </el-form>

            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                >
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        :width="50"
                        label="序号"
                    >
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        :formatter="emptyFormatter"
                        prop="worker_no"
                        :min-width="150"
                        show-overflow-tooltip
                        label="学生编号"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="worker_name"
                        show-overflow-tooltip
                        label="姓名"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="school_name"
                        show-overflow-tooltip
                        label="学校"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="student_name"
                        width="120"
                        fixed="left"
                        show-overflow-tooltip
                        label="关联人"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="worker_info"
                        width="120"
                        fixed="left"
                        show-overflow-tooltip
                        label="简介"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="worker_weixin"
                        show-overflow-tooltip
                        label="微信号"
                    />
                    <el-table-column
                        prop="finish_percent"
                        label="头像"
                        :width="70"
                    >
                        <template slot-scope="scope">
                            <el-popover
                                placement="top"
                                width="144"
                                trigger="hover"
                                popper-class="preview-pop"
                            >
                                <div class="preview-wrap">
                                    <div class="preview-code">
                                        <img :src="scope.row.worker_head">
                                    </div>
                                </div>
                                <img
                                    slot="reference"
                                    class="table-img"
                                    :src="scope.row.worker_head"
                                >
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="up_time"
                        :width="70"
                        label="二维码"
                    >
                        <template slot-scope="scope">
                            <el-popover
                                placement="top"
                                width="144"
                                trigger="hover"
                                popper-class="preview-pop"
                            >
                                <div class="preview-wrap">
                                    <div class="preview-code">
                                        <img :src="scope.row.worker_qrcode">
                                    </div>
                                </div>
                                <img
                                    slot="reference"
                                    class="table-img"
                                    :src="scope.row.worker_qrcode"
                                >
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        :min-width="150"
                        label="创建时间"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        :width="150"
                    >
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="handleRoute('HireWorkerAdd', {worker_no: scope.row.worker_no, hire_no: hire_no, hire_name: hire_name})"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    @click="fnDelete(scope.row.worker_no)"
                                >删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="page.page_id"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            authResult: {},
            hire_no: '',
            tableData: [],
            page: {
                page_id: 1,
                total_count: 0,
                page_size: 0
            },
            currTime: 0,
            hire_name: '',
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: '企业注册数据',
                name: 'hireList',
            },
            {
                title: '校园代理设置'
            }
        ]);
        this.hire_no = this.$route.query.hire_no;
        this.hire_name = this.$route.query.hire_name;
        this.getTableData(this.$route.query.page);
    },
    filters: {
        emptyFilter(val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    },
    methods: {
        /**
     * 获取表格数据
     */
        getTableData(page) {
            let time = new Date().getTime();

            this.currTime = time;

            this.$router.replace({
                query: {
                    hire_no: this.hire_no,
                    page: page || this.page.page_id
                }
            });
            this.$post('/student/hire_worker%5Cget_list', {
                hire_no: this.hire_no,
                page_id: page || this.page.page_id,
                page_size: 100,
            }, resp => {
                if (this.currTime != time) {
                    return;
                }
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.page_id = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                    if (this.page.page_id > resp.data.page.total_page && this.page.page_id !== 1) {
                        this.getTableData(resp.data.page.total_page);
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
     * 跳转页面
     */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /**
     * 列表渲染辅助函数：列表项为空处理
     */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },

        /** 删除某条数据 */
        fnDelete(worker_no) {
            this.$confirm('确认删除该项?', '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/hire_worker%5Cdelete', {
                    worker_no: worker_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.msg,
                            center: true,
                            duration: 5000
                        });
                    }
                });
            }).catch(() => {
            });
        },
    }
};
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
      margin-left: 10px;
    }
  }
  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
  }
  .search-wrapper {
    padding: 15px;
    background-color: #fff;
  }
  .filter-item {
    .el-form-item {
      margin-bottom: 0;
      white-space: nowrap;
    }
    .el-input {
      width: auto;
      vertical-align: middle;
    }
    .el-button {
      margin-left: 15px;
      vertical-align: middle;
    }
  }
  .table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
      padding: 0;
    }
  }
  .pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
      float: right;
      padding: 0;
      background-color: transparent;
    }
  }
  .table-img {
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
</style>
<style lang="less">
 .preview-pop {
    background-color: rgba(54, 67, 82, 1);
    color: #fff;
    font-size: 12px;
    text-align: center;
    img {
      width: 116px;
      height: 116px;
      margin-top: 4px;
    }
    .popper__arrow {
      border-top-color: rgba(54, 67, 82, 1);
      &::after {
        border-top-color: rgba(54, 67, 82, 1) !important;
      }
    }
    .el-form-item__label {
      color: #000;
    }
  }
</style>
